﻿<%@ page contentType="text/html;charset=UTF-8" language="java" %> <%@ taglib prefix="c"
uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<html>
  <head>
    <link rel="stylesheet" href="${ctx}/common/common.css" />
    <link rel="stylesheet" href="${ctx}/common/plugins/layuiadmin/layui/css/layui.css" media="all" />
    <link rel="stylesheet" href="${ctx}/common/plugins/layuiadmin/style/admin.css" media="all" />
    <script src="${ctx}/common/plugins/layuiadmin/layui/layui.js"></script>

    <style>
      .layui-table-header {
        width: 100%;
      }

      .layui-products {
        border-bottom: 2px solid #e7e7e7;
        /*border-top: 2px solid #e7e7e7;*/
        margin: 10px 0px;
        padding: 5px 0px;
      }

      .layui-products_li {
        margin-left: 50px;
        border-bottom: 1px dashed #e7e7e7;
      }

      .layui-products_li:first-child {
        border: none;
      }

      .layui-col-md4 img {
        margin-right: 5px;
        width: 22px;
        height: 22px;
      }

      .layui-col-md4 img {
        margin-right: 5px;
        width: 22px;
        height: 22px;
      }
    </style>
  </head>
  <body>
    <!--主体内容层-->
    <div class="layui-fluid">
      <div class="layui-row">
        <div class="layui-col-xs12">
          <input type="hidden" id="classifyIds" value="" />
          <input type="hidden" id="classifyNames" value="" />
          <form class="layui-form">
            <!--输入框内容盒子-->
            <div class="layui-col-xs12">
              <!--输入框-->
              <div class="layui-col-xs6">
                <label class="layui-form-label">类型名称</label>
                <div class="layui-input-block">
                  <input
                    type="text"
                    name="name"
                    id="name"
                    required
                    lay-verify="required"
                    placeholder="请输入类型名称"
                    autocomplete="off"
                    class="layui-input"
                  />
                </div>
              </div>
            </div>
            <!--通用按钮盒子-->
            <div class="layui-col-xs12" style="padding-top: 10px; padding-bottom: 10px">
              <div style="float: right" class="layui-btn-group paramBtn">
                <button data-type="reloadSource" type="button" class="layui-btn layui-btn-sm layui-btn-danger">
                  查询
                </button>
                <button data-type="resetSource" type="reset" class="layui-btn layui-btn-sm layui-btn-danger">
                  重置
                </button>
              </div>
            </div>
          </form>
          <!--通用table表格-->
          <table
            class="layui-table"
            id="sourceReload"
            lay-data="{ url:'${ctx }/supervise/inspection/queryClassifyList',page:true,groups:5}"
            lay-filter="demo"
          >
            <thead>
              <tr>
                <th lay-data="{field:'code'}">类型编码</th>
                <th lay-data="{field:'name'}">类型名称</th>
                <th lay-data="{field:'right',toolbar:'#barDemo'}">操作</th>
              </tr>
            </thead>
          </table>
        </div>
      </div>
    </div>
    <script type="text/html" id="barDemo">
      <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="select">选择</a>
    </script>
    <script>
      layui.use("table", function () {
        var loading = layer.msg("数据加载中...");
        var table = layui.table;
        table.render({
          done: function () {
            layer.close(loading);
          },
        });
        //监听filter为demo的table中的工具条
        table.on("tool(demo)", function (obj) {
          var data = obj.data;
          var a = this;
          if (obj.event === "select") {
            $("#productClassifyId", parent.document).val(data.id);
            $("#clyname", parent.document).val(data.name);
            var index = parent.layer.getFrameIndex(window.name);
            parent.layer.close(index);
          }
        });

        var $ = layui.$,
          active = {
            reloadSource: function () {
              //条件查询
              var name = document.getElementById("name").value;
              table.reload("sourceReload", {
                where: {
                  name: name,
                },
              });
            },
            resetSource: function () {
              table.reload("sourceReload", {
                where: {
                  name: "",
                },
              });
            },
          };

        $(".demoTable .layui-btn").on("click", function () {
          var type = $(this).data("type");
          active[type] ? active[type].call(this) : "";
        });
        //给按钮绑定active中的方法
        $(".paramBtn .layui-btn").on("click", function () {
          var type = $(this).data("type");
          //查看是active这个json中是否有type这个方法，如果有调用，如果没有不知心；
          active[type] ? active[type].call() : "";
        });
      });
    </script>
  </body>
</html>
